<template>
<view class="noticeCard">
  <view class="title flex a-item">
    <image class="img" src="https://www.zjjqf.cn/file/static/noticeIcon.png" />
    <p class="titleText">{{ notice.name }}</p>
  </view>
  <view class="line-division"></view>
  <view class="content">
    <view class="contentTitle flex a-item flex-warp">{{ notice.title }}</view>
    <view class="contentBody flex flex-row">
      <view class="tag">内容</view>
      <scroll-view style="height: 200rpx" :scroll-top="scrollTop" scroll-y="true">
      <view class="contentBodyText">{{ notice.content }}</view>
      </scroll-view>
    </view>
  </view>
  <view class="line-division"></view>
  <view class="jump flex a-item">
    点击查看详情
  </view>
  <view class="line-division"></view>
  <view class="time flex a-item">
    通知时间:&nbsp&nbsp&nbsp{{ notice.updateTime }}
  </view>
</view>
</template>

<script>
export default {
  name: "noticeCard",
  props:{
    notice:{
      type: Object,
      detail: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.noticeCard{
  margin-left: 5%;
  width: 90%;
  height: 700rpx;
  margin-top: 50rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  box-shadow: rgba(204,204,204,1) 0 0 2px 0;
  .title,.jump,.time{
    height: 100rpx;
    padding-left: 50rpx;
  }
  .content{
    height: 400rpx;
    padding-left: 50rpx;
    .contentTitle{
      font-size: 40rpx;
      height: 150rpx;
      overflow: hidden;
    }
    .contentBody{
      width: 100%;
      height: 250rpx;
      .tag{
        width: 150rpx;
      }
      .contentBodyText{
        width: 450rpx;
        font-size: 40rpx;
        word-break: break-all;
        overflow: hidden;
      }
    }
  }
  .title{
    .img{
      width: 50rpx;
      height: 50rpx;
      margin-right: 30rpx;
    }
    .titleText{
      font-size: 40rpx;
    }
  }
  .jump.time{
    font-size: 40rpx;
  }
}
.tag{
  color: rgb(180,180,180);
  font-size: 45rpx;
}

</style>
